<template>
    <div class="coupon">
        <!--S卡券封面-->
        <div id="cover" v-if="data.cover">
            <img v-lazy="data.cover" />
        </div>
        <!--E卡券封面-->

        <!--S卡券名字-->
        <div id="name" :class="data.cover ? '' : 'no-cover'">
            {{data.name}}
        </div>
        <!--S卡券名字-->

        <!--S卡券面值-->
        <div id="value">{{data.value}}</div>
        <!--E卡券面值-->

        <!--S卡券类型-->
        <div id="type">{{data.type_str}}</div>
        <!--E卡券类型-->

        <!--S卡券有效期-->
        <div id="time">{{data.time_str}}</div>
        <!--E卡券有效期-->

        <!--S卡券状态图标插槽-->
        <div id="status-icon">
            <slot name="status">
<!--                <i class="iconfont icon-shenhe01"></i>-->
            </slot>
        </div>
        <!--E卡券状态图标插槽-->

    </div>
</template>

<script>
export default {
    name: "coupon",
    props: {
        data: {
            type: Object,
            default() {
                return {
                    cover: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=131670276,973979107&fm=26&gp=0.jpg',
                    name: '卡券名字卡券名字卡券名字卡券名字卡券名字',
                    value: {face: '',value: '5折'},
                    type_str: '折扣券',
                    time_str: '有效期至2021-10-20'
                }
            }
        }
    }
}
</script>

<style scoped lang="less" src="./coupon.less"></style>
